<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册界面</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="<%=request.getContextPath()%>/style/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/style/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/style/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/style/css/animate.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/style/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/js/register.js"></script>  
</head>
<body class="gray-bg">
    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name">PT</h1>
            </div>
            <h3>欢迎注册 跑跑</h3>
            <p>创建一个跑跑新账户</p>
            <form class="m-t" role="form" id="form1" action="#">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入用户名" required="" name="userName" id="uname"> <span id="nameTip" style="color: red"></span>  
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="请输入密码" required="" id="pas1"  name="password"><span id="pas1Tip" style="color: red"></span>  
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="请再次输入密码" required="" id="pas2" name="password2"><span id="pas2Tip" style="color: red"></span>  
                </div>
                <div class="form-group text-left">
                    <div class="checkbox i-checks">
                        <label class="no-padding">
                            <input type="checkbox"><i></i> 我同意注册协议</label>
                    </div>
                </div>
            </form>
               <button type="submit" class="btn btn-primary block full-width m-b" onclick="sendJson()">注 册</button>
                <p class="text-muted text-center"><small>已经有账户了？</small><a href="toLogin.do">点此登录</a>
                </p>
        </div>
    </div>
    <script src="<%=request.getContextPath()%>/style/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=request.getContextPath()%>/style/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="<%=request.getContextPath()%>/style/js/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
    </script>
    <script type="text/javascript">
$(document).ready(function(){
  $("#uname").blur(function(){
	  if($("#uname").val()==" "||$("#uname").val()==null){
		  $("#nameTip").html("用户名不能为空且只能为英文或者数字"); 
	  }else{
		  $("#nameTip").html("输入正确");  
	  }
  });
  
  $("#pas1").blur(function(){//用户密码框失去焦点触发验证事件  
	  if(!$("#pas1").val() )//只处验证和上面一样  
      {  
          $("#pas1Tip").html("密码不能为空且只能为英文或者数字");  
      }  
      else  
      {  
          $("#pas1Tip").html("输入正确");  
      }  
   });  
  
  $("#pas2").blur(function(){//用户密码确认框失去焦点触发验证事件  
      if(!$(this).val() || $(this).val() != $("#pas1").val() )//此处验证和上面一样  
      {  
          $("#pas2Tip").html("密码为空或者和上面的密码不致");  
      }else if( $("#pas2").length<4||$("#pas2").length>10){
    	  $("#pas2Tip").html("密码长度为4到10之间");  
      }
      else  
      {  
          $("#pas2Tip").html("输入正确");  
      }  
   });  
  
});
</script>
    
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html>